import type { NextPage } from 'next'
import Head from 'next/head'

import Headback from '../../components/Headback'

import styles from '../../styles/Login.module.scss'
import {  useState } from 'react'
import { Toast } from 'antd-mobile'

import { UserService } from '../../services'
import { Warnicon, Winicon } from '../../components/Icon'
import router from 'next/router'

const Pwd: NextPage = () => {
  const [oldpwd, setOldpwd] = useState('')
  const [password, setPassword] = useState('')
  const [confirm, setConfirm] = useState('')

  async function goChange() {
    if (oldpwd === '' || password === '' || confirm === '') Toast.show({ content: <Warnicon text='补全信息' /> })
    else if (confirm !== password) Toast.show({ content: <Warnicon text='密码不一致' /> })
    else {
      const res = await UserService.updatePwd(oldpwd, password)
      if (res.stat === 'OK') {
        Toast.show({ content: <Winicon text='密码修改成功' /> })
        router.back()
      } else {
        Toast.show({ content: <Warnicon text={res.msg} /> })
      }
    }
  }
  return (
    <div className='page'>
      <Head>
        <title>修改密码页</title>
      </Head>
      <Headback page='修改密码' />
      <div className="wrap">
        <main className={styles.login}>
          <h3>民大二手书交易网修改密码</h3>
          <div className={styles.inputwrap}>
            <input type="password" placeholder='旧密码'
              value={oldpwd}
              onChange={(v) => setOldpwd(v.target.value)}
            />
            <i className="iconfont icon-mima"></i>
          </div>
          <div className={styles.inputwrap}>
            <input type='password' placeholder='新密码(6-18数字/字母/符号)'
              value={password}
              onChange={(v) => setPassword(v.target.value)}
            />
            <i className="iconfont icon-mima"></i>
          </div>
          <div className={styles.inputwrap}>
            <input type='password' placeholder='确认密码'
              value={confirm}
              onChange={(v) => setConfirm(v.target.value)}
            />
            <i className="iconfont icon-mima"></i>
          </div>
          <button
            onClick={goChange}
          >修改密码</button>
        </main>
      </div>
    </div>
  )
}

export default Pwd
